<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive, ref } from "vue";
import { fetchGetActivityNumberRank } from '@/api/screen/activity'

let datas = [
  { name: '校庆晚会', nowNumber: 99 },
  { name: '第一届歌手大赛', nowNumber: 95 },
  { name: '第二届校园篮球赛', nowNumber: 89 },
  { name: '轮滑社第一届联谊活动', nowNumber: 87 },
  { name: '谁羽争锋羽毛球赛', nowNumber: 80 },
  { name: '绿荫足球联赛', nowNumber: 70 },
  { name: '歌舞大赛', nowNumber: 60 },
  { name: '第一届魔术大赛', nowNumber: 40 },
  { name: '第一届书法大赛', nowNumber: 35 },
  { name: '第一届创新创业大赛', nowNumber: 30 },
]

const getNumberRank = async () => {
  const res = await fetchGetActivityNumberRank()
}

onMounted(() => {
  getNumberRank()
})

let formData = []

var seriesName = '参与活动人数';
var attackSourcesColor = [
  {
    type: "linear",
    x: 0, // 右
    y: 1, // 下
    x2: 0, // 左
    y2: 0, // 上
    colorStops: [
      {
        offset: 0,
        color: "#EB3B5A", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FE9C5A", // 90% 处的颜色
      },
    ],
  },
  {
    type: "linear",
    x: 0, // 右
    y: 1, // 下
    x2: 0, // 左
    y2: 0, // 上
    colorStops: [
      {
        offset: 0,
        color: "#FA8231", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FFD14C", // 90% 处的颜色
      },
    ],
  },
  {
    type: "linear",
    x: 0, // 右
    y: 1, // 下
    x2: 0, // 左
    y2: 0, // 上
    colorStops: [
      {
        offset: 0,
        color: "#F7B731", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FFEE96", // 90% 处的颜色
      },
    ],
  },
  {
    type: "linear",
    x: 1, // 右
    y: 0, // 下
    x2: 0, // 左
    y2: 0, // 上
    colorStops: [
      {
        offset: 0,
        color: "#395CFE", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#2EC7CF", // 90% 处的颜色
      },
    ],
  },
];
var attackSourcesColor1 = [
  '#EB3B5A',
  '#FA8231',
  '#F7B731',
  '#3860FC',
  '#1089E7',
  '#F57474',
  '#56D0E3',
  '#1089E7',
  '#F57474',
  '#1089E7',
  '#F57474',
  '#F57474',
];
let rankings = reactive([]);
let stationData: string[] = reactive([]);
let values: number[] = [];



datas.forEach(function (it, index) {
  rankings.push(index + 1);
  stationData.push(it.name);
  values.push(it.nowNumber);
});

function dataFormat(data) {
  let arr = [];
  data.forEach(function (item, i) {
    let itemStyle = {
      color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
    };
    arr.push({
      value: item,
      itemStyle: itemStyle,
    });
  });
  return arr;
}
const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '-12%',
    right: '4%',
    bottom: '2%',
    top: '2%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: stationData,
      axisLabel: {
        margin: 30,
        fontSize: 10,
        align: 'left',
        padding: [2, 0, 0, 0],
        color: '#000',
        rich: {
          nt1: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[0],
            width: 13,
            height: 13,
            fontSize: 10,
            align: 'center',
            borderRadius: 100,
            lineHeight: '5',
            padding: [0, 1, 2, 1],
            // padding:[0,0,2,0],
          },
          nt2: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[1],
            width: 13,
            height: 13,
            fontSize: 10,
            align: 'center',
            borderRadius: 100,
            padding: [0, 1, 2, 1],
          },
          nt3: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[2],
            width: 13,
            height: 13,
            fontSize: 10,
            align: 'center',
            borderRadius: 100,
            padding: [0, 1, 2, 1],
          },
          nt: {
            color: '#fff',
            backgroundColor: attackSourcesColor1[3],
            width: 13,
            height: 13,
            fontSize: 10,
            align: 'center',
            borderRadius: 100,
            padding: [0, 1, 2, 1],
            lineHeight: 5,
          },
        },
        formatter: function (value: any, index: string | number) {
          index = index + 1;
          if (index - 1 < 3) {
            return ['{nt' + index + '|' + index + '}'].join('\n');
          } else {
            return ['{nt|' + index + '}'].join('\n');
          }
        },
      },
    },
    {
      type: 'category',
      inverse: true,
      offset: -10,
      position: 'left',
      axisTick: 'none',
      axisLine: 'none',
      show: true,
      axisLabel: {
        interval: 0,
        color: ['#fff'],
        align: 'left',
        verticalAlign: 'bottom',
        lineHeight: 32,
        fontSize: 10,
      },
      data: dataFormat(stationData),
    },
  ],
  series: [
    {
      zlevel: 1,
      name: seriesName,
      type: 'bar',
      barWidth: 15,
      data: dataFormat(values),
      align: 'center',
      itemStyle: {
        normal: {
          barBorderRadius: 10,
        },
      },
      label: {
        show: true,
        fontSize: 10,
        color: '#fff',
        textBorderWidth: 2,
        padding: [2, 0, 0, 0],
      },
    },
    {
      name: seriesName,
      type: 'bar',
      barWidth: 15,
      barGap: '-100%',
      data: [100, 90, 80, 70, 60, 50],
      itemStyle: {
        normal: {
          color: '#05325F',
          //width:"100%",
          fontSize: 10,
          barBorderRadius: 30,
        },
      },
    },
  ],
})

</script>

<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
